<template>
	<view class="" v-if="loadingShow||informList.length!==0">
		<view class="inform-box" v-for="(item ,index) in informList" :key="item.id">
			<view class="title_box">
				<view class="type" :class="'type_'+item.type">
					通知
				</view>
				<u--text :lines="1" text="西安消息测试" bold></u--text>
			</view>
			<u--text :lines="2" size="26rpx" text="唧唧复唧唧,木兰当户织,不闻机猝死,微问女叹息,问女何所思,问女何所忆,女亦无所思,女亦无所忆,昨夜见军帖,可汗大点兵,军书十二卷,卷卷有爷名">
			</u--text>
		</view>
		<view class="box" v-if="loadingShow">
			<view class="loading">
				<view class="loader"></view>
				<view class="loading-text">
					加载中...
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				informList:[],
				loadingShow: false
			};
		},
		computed: {
			networkShow() {
				return this.$store.state.networkShow
			},
			informListState() {
				return this.$store.state.informList
			},
		},
		watch: {
			networkShow(t, f) {
				this.loadingShow = this.$store.state.networkShow.code
			},
			informListState(){
				console.log(this.informListState)
				this.informList=this.informListState.filter(item=>item.show)
			},
		},
		mounted() {
			this.informList=this.$store.state.informList.filter(item=>item.show)
		},
		methods:{

		}
	};
</script>

<style scoped="true" lang="scss">
	.inform-box {
		background: #ffffff;
		padding: 20rpx;
		border-radius: 20rpx;
		width: calc(100vw - 80rpx);
		position: fixed;
		left: 20rpx;
		top: -200rpx;
		z-index: 999999;
		box-shadow: 0rpx 2rpx 6rpx #ccc;
		animation: an 5s ease-out;
		.title_box{
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			.type{
				width: 96rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				text-align: center;
				margin-right: 10rpx;
			}
		}
		
	}
	
	@keyframes an{
		0%{
			top: -200rpx;
			opacity: .1;
		}
		10%{
			top: 180rpx;
			opacity: 1;
		}
		90%{
			top: 180rpx;
				opacity: 1;
		}
		100%{
			top: -200rpx;
			opacity: .1;
		}
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.19);
	}

	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 240upx;
		width: 160upx;
		margin: -120upx 0 0 -80upx;
	}

	.loading-text {
		text-align: center;
		position: absolute;
		bottom: -50rpx;
		left: 0;
		right: 0;
		color: #333;
		font-size: 24rpx;
		color: #ffffff;
	}


	.loader {
		display: block;
		position: relative;
		left: 50%;
		top: 50%;
		width: 150upx;
		height: 150upx;
		margin: -75upx 0 0 -75upx;
		border-radius: 50%;
		border: 3upx solid transparent;
		border-top-color: #9370db;
		-webkit-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}

	.loader::before {
		content: "";
		position: absolute;
		top: 5upx;
		left: 5upx;
		right: 5upx;
		bottom: 5upx;
		border-radius: 50%;
		border: 3upx solid transparent;
		border-top-color: #ba55d3;
		-webkit-animation: spin 3s linear infinite;
		animation: spin 3s linear infinite;
	}

	.loader::after {
		content: "";
		position: absolute;
		top: 15upx;
		left: 15upx;
		right: 15upx;
		bottom: 15upx;
		border-radius: 50%;
		border: 3upx solid transparent;
		border-top-color: #ff00ff;
		-webkit-animation: spin 1.5s linear infinite;
		animation: spin 1.5s linear infinite;
	}

	@-webkit-keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
</style>
